
<a (click)="handleSave()" nz-button title="保存">
    <i nz-icon nzType="save"></i>
</a>

<a [nzDropdownMenu]="exportDropDownMenu" nz-button nz-dropdown title="导出">
    <i nz-icon nzType="profile"></i>
</a>
<nz-dropdown-menu #exportDropDownMenu="nzDropdownMenu">
    <ul nz-menu>
<!--        <li (click)="canvas.graph.exportSVG()" nz-menu-item>导出SVG</li>-->
        <li (click)="canvas.graph.exportPNG()" nz-menu-item>导出PNG</li>
        <li (click)="canvas.graph.exportJPEG()" nz-menu-item>导出JPEG</li>
        <li nz-menu-divider></li>
        <li (click)="handleExport()" nz-menu-item>导出JSON</li>
        <li (click)="handleImport()" nz-menu-item>导入JSON</li>
    </ul>
</nz-dropdown-menu>

<input type="file" style="display: none" #file (change)="onJsonUpload($event)">

<nz-divider nzType="vertical"></nz-divider>

<a (click)="drawLine()" nz-button title="线条">
    <i nz-icon nzType="minus"></i>
</a>

<a (click)="drawFlow()" nz-button title="流动线条">
    <i nz-icon nzType="dash"></i>
</a>

<nz-divider nzType="vertical"></nz-divider>

<a (click)="handleUndo()" [disabled]="!canvas.graph.canUndo()" nz-button title="撤销(ctrl+z)">
    <i nz-icon nzType="undo"></i>
</a>
<a (click)="handleRedo()" [disabled]="!canvas.graph.canRedo()" nz-button title="重做(ctrl+y)">
    <i nz-icon nzType="redo"></i>
</a>

<nz-divider nzType="vertical"></nz-divider>

<a (click)="handleCut()" [disabled]="!canvas.graph.getSelectedCellCount()" nz-button title="剪切(ctrl+x)">
    <i nz-icon nzType="scissor"></i>
</a>
<a (click)="handleCopy()" [disabled]="!canvas.graph.getSelectedCellCount()" nz-button title="复制(ctrl+c)">
    <i nz-icon nzType="copy"></i>
</a>
<a (click)="handlePaste()" [disabled]="!canvas.graph.getCellsInClipboard().length" nz-button title="粘贴(ctrl+v)">
    <i nz-icon nzType="snippets"></i>
</a>
<a (click)="handleDelete()" [disabled]="!canvas.graph.getSelectedCellCount()" nz-button title="删除">
    <i nz-icon nzType="delete"></i></a>

<nz-divider nzType="vertical"></nz-divider>

<a (click)="handleAlignLeft()" [disabled]="canvas.graph.getSelectedCellCount()<2" nz-button>
    <i nz-icon nzType="align-left" title="左对齐"></i>
</a>
<a (click)="handleAlignCenter()" [disabled]="canvas.graph.getSelectedCellCount()<2" nz-button>
    <i nz-icon nzType="align-center" title="居中对齐"></i>
</a>
<a (click)="handleAlignRight()" [disabled]="canvas.graph.getSelectedCellCount()<2" nz-button>
    <i nz-icon nzType="align-right" title="右对齐"></i>
</a>

<nz-divider nzType="vertical"></nz-divider>

<a (click)="handleValignTop()" [disabled]="canvas.graph.getSelectedCellCount()<2" nz-button>
    <i nz-icon nzType="vertical-align-top" title="上对齐"></i>
</a>
<a (click)="handleValignMiddle()" [disabled]="canvas.graph.getSelectedCellCount()<2" nz-button>
    <i nz-icon nzType="vertical-align-middle" title="居中对齐"></i>
</a>
<a (click)="handleValignBottom()" [disabled]="canvas.graph.getSelectedCellCount()<2" nz-button>
    <i nz-icon nzType="vertical-align-bottom" title="下对齐"></i>
</a>

<nz-divider nzType="vertical"></nz-divider>

<a (click)="handleMoveTop()" [disabled]="!canvas.graph.getSelectedCellCount()" nz-button>
    <i [nzRotate]="90" nz-icon nzType="vertical-right" title="置顶"></i>
</a>
<a (click)="handleMoveUp()" [disabled]="canvas.graph.getSelectedCellCount()!=1" nz-button>
    <i nz-icon nzType="up" title="上移一层"></i>
</a>
<a (click)="handleMoveDown()" [disabled]="canvas.graph.getSelectedCellCount()!=1" nz-button>
    <i nz-icon nzType="down" title="下移一层"></i>
</a>
<a (click)="handleMoveBottom()" [disabled]="!canvas.graph.getSelectedCellCount()" nz-button>
    <i [nzRotate]="90" nz-icon nzType="vertical-left" title="置底"></i>
</a>

<nz-divider nzType="vertical"></nz-divider>

<a (click)="handleGroup()" [disabled]="canvas.graph.getSelectedCellCount()<2" nz-button>
    <i nz-icon nzType="group" title="组合"></i>
</a>
<a (click)="handleUngroup()" [disabled]="!isGroup()" nz-button>
    <i nz-icon nzType="ungroup" title="解除组合"></i>
</a>

<nz-divider nzType="vertical"></nz-divider>

<a (click)="handleGrid()" nz-button>
    <i nz-icon nzType="table" title="显示网格"></i>
</a>

<nz-select (ngModelChange)="handleScale($event)" [ngModelOptions]="{standalone: true}"
           [ngModel]="scale">
    <nz-option [nzValue]="0.25" nzLabel="25%"></nz-option>
    <nz-option [nzValue]="0.5" nzLabel="50%"></nz-option>
    <nz-option [nzValue]="0.75" nzLabel="75%"></nz-option>
    <nz-option [nzValue]="1" nzLabel="100%"></nz-option>
    <nz-option [nzValue]="2" nzLabel="200%"></nz-option>
    <nz-option [nzValue]="5" nzLabel="500%"></nz-option>
</nz-select>

<nz-divider nzType="vertical"></nz-divider>

<a (click)="preview()" nz-button>
    <i nz-icon nzType="play-square" title="预览"></i>
</a>

<a (click)="about()" nz-button>
    <i nz-icon nzType="question-circle" title="关于"></i>
</a>

